<template>
  <div class="singer">
    <listView :data="singers"></listView>
  </div>
</template>

<script type="es6">
  import { ERR_OK } from '../../api/config.js'
  import { getSingerList } from '../../api/singer.js'
  import  Singer from '../../common/js/singer.js'
  import listView from '../../base/listview/listview.vue'

  const HOT_length = 10
  const HOT_NAME = '热门'

  export default {
    data () {
      return {
        singers: [],
      }
    },
    methods: {
      _getSingerList() {
        getSingerList().then((res) => {
          if (res.code === ERR_OK) {
            this.singers = this.normalizeSinger(res.data.list)
          }
        })
      },
      normalizeSinger(list) {
        let arr = {
          hot: {
            title: HOT_NAME,
            items: []
          }
        }
        list.forEach((item, index) => {
          let key = item.Findex
          if (index < HOT_length) {
            arr.hot.items.push(new Singer({id: item.Fsinger_mid, name: item.Fsinger_name}));
          }
          if (!arr[key]) {
            arr[key] = {
              title: key,
              items: []
            }
          }
          arr[key].items.push(new Singer({id: item.Fsinger_mid, name: item.Fsinger_name}));
        })
        let ret = []
        let hot = []
        let others = []
        for (let i in arr) {
          let key = arr[i];
          if (key.title.match(/[a-zA-Z]/)) {
            ret.push(key)
          }
          else if(key.title == '热门'){
            hot.push(key)
          }
          else {
            others.push(key)
          }
        }
        ret.sort((a, b) => {
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
        })
        return hot.concat(ret,others)
      }
    },
    created: function () {
      this._getSingerList()
    },
    components: {
      listView
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  .singer
    position: fixed
    top: 88px
    bottom: 0
    width: 100%
</style>
